<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机用户登记及查询系统</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input[type="text"]:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            margin: 25px 0;
            flex-wrap: wrap;
            gap: 10px;
        }

        button {
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
            flex: 1;
            min-width: 120px;
        }

        .add-btn {
            background-color: #2ecc71;
            color: white;
        }

        .add-btn:hover {
            background-color: #27ae60;
        }

        .clear-btn {
            background-color: #e74c3c;
            color: white;
        }

        .clear-btn:hover {
            background-color: #c0392b;
        }

        .show-btn {
            background-color: #3498db;
            color: white;
        }

        .show-btn:hover {
            background-color: #2980b9;
        }

        .search-group {
            display: flex;
            margin-top: 30px;
            gap: 10px;
        }

        .search-input {
            flex: 1;
        }

        .search-btn {
            background-color: #9b59b6;
            color: white;
            min-width: 120px;
        }

        .search-btn:hover {
            background-color: #8e44ad;
        }

        .message {
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }

        .record-list {
            margin-top: 30px;
            display: none;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        tr:hover {
            background-color: #f9f9f9;
        }

        .no-records {
            text-align: center;
            padding: 20px;
            color: #777;
            font-style: italic;
        }

        @media (max-width: 600px) {
            .button-group {
                flex-direction: column;
            }

            button {
                width: 100%;
            }

            .search-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>手机用户登记及查询系统</h1>

        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" id="name" placeholder="请输入姓名">
        </div>

        <div class="form-group">
            <label for="phone">手机：</label>
            <input type="text" id="phone" placeholder="请输入手机号码">
        </div>

        <div class="form-group">
            <label for="company">公司：</label>
            <input type="text" id="company" placeholder="请输入公司名称">
        </div>

        <div class="button-group">
            <button class="add-btn" id="addRecord">新增记录</button>
            <button class="clear-btn" id="clearRecords">清除记录</button>
            <button class="show-btn" id="showRecords">显示记录</button>
        </div>

        <div class="search-group">
            <div class="search-input">
                <label for="searchPhone">输入手机号：</label>
                <input type="text" id="searchPhone" placeholder="请输入要查找的手机号码">
            </div>
            <button class="search-btn" id="searchOwner">查找机主</button>
        </div>

        <div id="message"></div>

        <div class="record-list" id="recordList">
            <h2>已登记用户列表</h2>
            <table id="recordsTable">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>手机</th>
                        <th>公司</th>
                    </tr>
                </thead>
                <tbody id="recordsBody">
                    <!-- 记录将在这里动态生成 -->
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // DOM元素
        const nameInput = document.getElementById('name');
        const phoneInput = document.getElementById('phone');
        const companyInput = document.getElementById('company');
        const searchPhoneInput = document.getElementById('searchPhone');
        const addRecordBtn = document.getElementById('addRecord');
        const clearRecordsBtn = document.getElementById('clearRecords');
        const showRecordsBtn = document.getElementById('showRecords');
        const searchOwnerBtn = document.getElementById('searchOwner');
        const messageDiv = document.getElementById('message');
        const recordListDiv = document.getElementById('recordList');
        const recordsBody = document.getElementById('recordsBody');

        // 显示消息
        function showMessage(message, type) {
            messageDiv.textContent = message;
            messageDiv.className = 'message ' + type;
            messageDiv.style.display = 'block';

            // 3秒后自动隐藏消息
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 3000);
        }

        // 获取所有记录
        function getRecords() {
            const records = localStorage.getItem('phoneRecords');
            return records ? JSON.parse(records) : [];
        }

        // 保存记录
        function saveRecords(records) {
            localStorage.setItem('phoneRecords', JSON.stringify(records));
        }

        // 验证手机号格式
        function validatePhone(phone) {
            const phoneRegex = /^\d{11}$/;
            return phoneRegex.test(phone);
        }

        // 验证表单
        function validateForm() {
            const name = nameInput.value.trim();
            const phone = phoneInput.value.trim();
            const company = companyInput.value.trim();

            if (!name || !phone || !company) {
                showMessage('请填写完整信息（姓名、手机和公司）', 'error');
                return false;
            }

            if (!validatePhone(phone)) {
                showMessage('请输入有效的手机号码', 'error');
                return false;
            }

            return { name, phone, company };
        }

        // 添加记录
        addRecordBtn.addEventListener('click', () => {
            const record = validateForm();
            if (!record) return;

            const records = getRecords();

            // 检查手机号是否已存在
            const existingRecord = records.find(r => r.phone === record.phone);
            if (existingRecord) {
                showMessage('该手机号已存在，无法重复添加', 'error');
                return;
            }

            records.push(record);
            saveRecords(records);

            showMessage('记录添加成功！', 'success');

            // 清空表单
            nameInput.value = '';
            phoneInput.value = '';
            companyInput.value = '';
        });

        // 清除所有记录
        clearRecordsBtn.addEventListener('click', () => {
            if (confirm('确定要清除所有记录吗？此操作不可恢复。')) {
                localStorage.removeItem('phoneRecords');
                showMessage('所有记录已清除', 'info');
                recordsBody.innerHTML = '';
                recordListDiv.style.display = 'none';
            }
        });

        // 显示所有记录
        showRecordsBtn.addEventListener('click', () => {
            const records = getRecords();

            if (records.length === 0) {
                recordsBody.innerHTML = '<tr><td colspan="3" class="no-records">暂无记录</td></tr>';
            } else {
                recordsBody.innerHTML = '';
                records.forEach(record => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${record.name}</td>
                        <td>${record.phone}</td>
                        <td>${record.company}</td>
                    `;
                    recordsBody.appendChild(row);
                });
            }

            recordListDiv.style.display = 'block';
        });

        // 查找机主
        searchOwnerBtn.addEventListener('click', () => {
            const searchPhone = searchPhoneInput.value.trim();

            if (!searchPhone) {
                showMessage('请输入要查找的手机号', 'error');
                return;
            }

            if (!validatePhone(searchPhone)) {
                showMessage('请输入有效的手机号码', 'error');
                return;
            }

            const records = getRecords();
            const foundRecord = records.find(record => record.phone === searchPhone);

            if (foundRecord) {
                showMessage(`找到机主：${foundRecord.name}，公司：${foundRecord.company}`, 'success');
            } else {
                showMessage('未找到该手机号对应的记录', 'error');
            }
        });

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            // 检查是否有现有记录
            const records = getRecords();
            if (records.length > 0) {
                showMessage(`系统已加载 ${records.length} 条记录`, 'info');
            }
        });
    </script>
</body>
</html>
